<template>
	<view class="setting-container">
		<!-- 设置支付密码 -->
		<view class="setting-item" @tap="goToPaymentPassword">
			<text class="item-text">设置支付密码</text>
			<view class="item-arrow"></view>
		</view>

		<!-- 收货地址 -->
		<view class="setting-item" @tap="goToAddress">
			<text class="item-text">收货地址</text>
			<view class="item-arrow"></view>
		</view>

		<!-- 修改密码 -->
		<view class="setting-item" @tap="goToChangePassword">
			<text class="item-text">修改密码</text>
			<view class="item-arrow"></view>
		</view>

		<!-- 备案信息 -->
		<view class="record-info">
			<text>豫ICP备2022021210号-2A</text>
		</view>

		<!-- 退出登录 -->
		<button class="exit-btn" @tap="exitLogin">退出登录</button>
	</view>
</template>

<script>
	export default {
		methods: {
			// 前往设置支付密码
			goToPaymentPassword() {
				uni.navigateTo({
					url: '/pages/setting/paymentPassword'
				});
			},

			// 前往收货地址
			goToAddress() {
				uni.navigateTo({
					url: '/pages/address/addressList'
				});
			},

			// 前往修改密码
			goToChangePassword() {
				uni.navigateTo({
					url: '/pages/setting/changePassword'
				});
			},

			// 退出登录
			exitLogin() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							// 清除登录状态
							uni.removeStorageSync('token');
							uni.removeStorageSync('userInfo');
							// 跳转到登录页面
							uni.reLaunch({
								url: '/pages/register/login'
							});
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.setting-container {
		padding: 20rpx 0;
		background-color: #f5f5f5;
		// min-height: 100vh;
		// display: flex;
		// flex-direction: column;
		// justify-content: space-between;
	}

	.setting-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 30rpx;
		background-color: #ffffff;
		margin-bottom: 1rpx;
	}

	.item-text {
		font-size: 28rpx;
		color: #333333;
	}

	.item-arrow {
		width: 20rpx;
		height: 20rpx;
		border-top: 2rpx solid #999999;
		border-right: 2rpx solid #999999;
		transform: rotate(45deg);
	}

	.record-info {
		text-align: center;
		padding: 30rpx 0;
		font-size: 24rpx;
		color: #999999;
	}

	.exit-btn {
		width: 80%;
		margin: 40rpx auto;
		background-color: #e61717;
		color: #ffffff;
		font-size: 32rpx;
		border-radius: 60rpx;
	}
</style>